<template>
  <div class="facility-detail">
    <van-sticky>
      <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" />
    </van-sticky>
    <van-cell-group :border="false" class="facility-detail-items">
      <van-cell title="商品图片" center>
        <template #right-icon>
          <van-uploader v-model="imgurls" :max-count="max_count" accept="image/*" @oversize="onOversize" :before-delete="beforeDel" :after-read="afterRead" :deletable="deletable" :max-size="5120 * 1024" />
        </template>
      </van-cell>
      <van-field label="设备名称" v-model="fdata.devicename" input-align="right" />
      <van-field label="设备品牌" v-model="fdata.deviceclass" input-align="right" />
      <van-field label="设备型号" v-model="fdata.devicetype" input-align="right" />
      <van-field label="设备租金" v-model="fdata.price" type="number" input-align="right">
        <template #extra><span style="margin-left: 5px;">元</span></template>
      </van-field>
      <van-field label="设备毛重" type="number" v-model="fdata.weight" input-align="right">
        <template #extra><span style="margin-left: 5px;">Kg</span></template>
      </van-field>
      <van-field label="功率" type="number" v-model="fdata.power" input-align="right">
        <template #extra><span style="margin-left: 5px;">W</span></template>
      </van-field>
      <van-field label="生产商" v-model="fdata.vendor" input-align="right" />
      <van-field label="冻眠产品" v-model="fdata.manufacture" type="textarea" class="facility-introduce" maxlength="300" show-word-limit :autosize="{minHeight:80}" input-align="right" />
      <van-field label="简介" v-model="fdata.remark" maxlength="300" show-word-limit type="textarea" class="facility-introduce" :autosize="{minHeight:80}" input-align="right" />
    </van-cell-group>
    <div class="facility-detail-set" v-if="utype==0">
      <div class="set-center">
        <van-button round type="info" color="#1bb89c" @click="saveFacility">保 存</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'FacilityDetail',
  data () {
    return {
      id: '',
      utype: '',
      deletable: true,
      showSellway: false,
      fdata: [],
      max_count: 3,
      imgurls: [],
      edit_img: [],
    };
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    // 图片限制
    onOversize () {
      Toast.fail("图片大小不能超过5M");
    },
    // 查询
    getFacilityItem () {
      this.id = this.$route.query.id
      this.$axios('/index/boxedevices', {
        id: this.id
      })
        .then(res => {
          if (res.data.code == 1) {
            this.fdata = res.data.data
            this.edit_img = this.fdata.imageurl
            this.imgurls = this.edit_img.map(item => {
              return { url: this.img + item }
            })
          } else {
            Toast.fail(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err);
        })
    },
    // 删除图片前的回调
    beforeDel (val, detail) {
      this.imgurls.splice(detail.index, 1)
      this.edit_img.splice(detail.index, 1)
    },
    // 图片上传状态
    afterRead (file) {
      file.status = "uploading";
      let params = new FormData();
      params.append("file", file.file);
      this.$notoken("/main/upload", params)
        .then((res) => {
          let imgurl = res.data.data
          this.edit_img.push(imgurl)
        });
      setTimeout(() => {
        file.status = "done";
        file.message = "上传成功";
      }, 1000);
    },
    // 编辑
    saveFacility () {
      this.$axios('/index/boxedevices', {
        id: this.id,
        handle: "ajax", //查看不需要带，编辑提交时必填
        imageurl: this.edit_img, //新图片+旧图片，设备图片，多图用 , 分开,
        deviceclass: this.fdata.deviceclass, //设备类
        devicename: this.fdata.devicename, //设备名
        devicetype: this.fdata.devicetype, //设备型号
        price: this.fdata.price, //价格
        weight: this.fdata.weight,//重量
        vendor: this.fdata.vendor,//厂家
        power: this.fdata.power,//功率
        manufacture: this.fdata.manufacture, //冻眠产品
        remark: this.fdata.remark, //备注信息
      })
        .then(res => {
          if (res.data.code == 1) {
            Toast.loading('正在保存')
            setTimeout(() => {
              Toast.success('保存成功')
              this.$router.go(-1)
            }, 1500);
          } else {
            Toast.fail(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err);
        })
    },
  },
  created () {
    this.utype = JSON.parse(localStorage.getItem("userInfo")).user.utype
    this.$route.params.id
    this.getFacilityItem()
  },
}
</script>
<style lang="less" scoped>
.facility-detail {
  display: flex;
  flex-direction: column;
  &-items {
    width: 100%;
    /deep/ .van-uploader__file,
    /deep/ .van-uploader__upload,
    /deep/ .van-uploader__preview,
    /deep/ .van-uploader__preview-image {
      border-radius: 15px;
    }
    &-img {
      width: 100%;
      height: 5rem;
    }
    /deep/ .van-field__label {
      color: black;
    }
    .spacing {
      width: 100%;
      height: 20px;
      background-color: #f5f5f5;
    }
    .facility-introduce {
      /deep/ .van-field__label {
        width: 20%;
      }
      /deep/ .van-field__body {
        background-color: #f6f6f6;
        border-radius: 10px;
        padding: 20px;
      }
      /deep/.van-field__control {
        text-align: left;
      }
    }
  }
  &-set {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 100px auto;
    .set-center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 0 auto;
      .set-spacing {
        height: 30px;
      }
      /deep/ .van-button {
        width: 80%;
        height: 80px;
        font-weight: bold;
        font-size: 30px;
      }
    }
  }
}
</style>